<template>
  <div class="bigbox">
    <!-- 左侧盒子 -->
    <div class="leftbox">
      <!-- 树节点过滤 -->
      <div>
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          v-model="filterText">
        </el-input>
      </div>
      <!-- 树组件 -->
      <div style="margin-top: 15px;">
        <el-tree
          ref="tree"
          :props="props"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          :load="loadNode"
          lazy>
          <template slot-scope="{ node, data }">
            <span :style="{cursor: data.disabled ? 'no-drop' : 'pointer', fontSize: '14px'}">{{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- 右侧盒子 -->
    <div class="rightbox">
      <div class="topbox">
        <!-- 用电企业下拉 -->
         <span>订阅用电企业 </span>
         <template>
            <el-select v-model="value" filterable placeholder="请选择" size="small" @change="change">
              <el-option
                v-for="item in qiyelist"
                 
                class="options"
                :key="item.value"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
      </div>
      <div class="bodybox">
        <!-- 推送 -->
        <div style="height: 100%;">    
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <!-- 系统推送 -->
              <el-tab-pane label="系统推送" name="first" >
                <div class="xitong">
                  <span class="span">是否铃声告警</span>
                  <span>
                    <el-switch
                      v-model="form.isRing"
                      active-color="#13ce66"
                      >
                    </el-switch>
                  </span>
                  <span class="span left">报警铃声</span>
                  <span class="span">严重</span>
                  <span>
                    <el-select v-model="form.severityRing" placeholder="请选择" style="width: 150px;" size="mini">
                      <el-option
                        label="严重"
                        class="options"
                        value="10">
                      </el-option>
                    </el-select>
                  </span>
                  <span @click="form.severityRing?$refs.audio.play():''"><img style=" cursor: pointer;" class="img" src="../../assets/laba.png" alt="">
                    <audio  ref="audio"  src="../../assets/audio/alarm.mp3"></audio></span>
                  <span class="span">普通</span>
                  <span>
                    <el-select v-model="form.generalRing" placeholder="请选择" style="width: 150px;" size="mini">
                      <el-option
                       label="普通"
                       class="options"
                        value="20">
                      </el-option>
                    </el-select>
                  </span>
                  <span @click="form.generalRing?$refs.audio1.play():''"><img style=" cursor: pointer;" class="img" src="../../assets/laba.png" alt="">
                    <audio  ref="audio1"  src="../../assets/audio/alarm2.mp3"></audio></span>
                  <span class="span">轻微</span>
                  <span>
                    <el-select v-model="form.slightRing" placeholder="请选择" style="width: 150px;" size="mini">
                      <el-option
                      class="options"
                        label="轻微"
                        value="30">
                      </el-option>
                    </el-select>
                  </span>
                  <span @click="form.slightRing?$refs.audio2.play():''"><img style=" cursor: pointer;" class="img" src="../../assets/laba.png" alt="">
                    <audio  ref="audio2"  src="../../assets/audio/alarm3.mp3"></audio></span>
                </div>
              </el-tab-pane>
              <!-- 短信推送 -->
              <el-tab-pane label="短信推送" name="second" >
                <div class="xitong">
                  <span class="span">短信推送</span>
                  <span>
                    <el-switch
                      v-model="form.isNote"
                      active-color="#13ce66">
                    </el-switch>
                  </span>
                  <span class="span left">手机号码</span>
                  <span class="span"><el-input 
                    placeholder="手机号码"
                    style="width: 150px;"
                    size="mini"
                    v-model="form.notePhones"></el-input></span>
                </div>
              </el-tab-pane>
              <!-- APP推送 -->
              <el-tab-pane label="APP推送" name="third" >
                <div class="xitong">
                  <span class="span">APP推送</span>
                  <span >
                    <el-switch
                      v-model="form.isApp"
                      active-color="#13ce66">
                    </el-switch>
                  </span>
                </div>
              </el-tab-pane>
              <!-- APP推送 -->
              <el-tab-pane label="公众号推送" name="gongzhao">
                <div class="xitong">
                  <span class="span">公众号推送</span>
                  <span >
                    <el-switch
                      v-model="form.isOa"
                      active-color="#13ce66">
                    </el-switch>
                  </span>
                  <span class="span left">手机号码</span>
                  <span class="span"><el-input 
                    placeholder="手机号码"
                    style="width: 150px;"
                    size="mini"
                    v-model="form.oaPhones"></el-input></span>
                </div>
              </el-tab-pane>
            </el-tabs>
            <Gjtemplate :displaylist="displaylist" class="little" :checklist="checklist" ref="gjtemplate" @updateAll="updateAll" />
            <div class="footer"><button class="button" @click="submit">保存</button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getgaofenzuapi ,getqiyexialalist,getgengjiedianapi,getzhuzhijigouapi,getuserlistapis,getuserinfo,postbaocuninfoapi} from '@/api/subscribe'
import Gjtemplate from './components/gjtemplate.vue'
export default {
  name: 'CallPoliceIndex',
components:{Gjtemplate},
  data() {
    return {
      form:{isRing:'1',isNote: '1', isApp:'1',isOa:'1',notePhones:'',oaPhones:''},
      filterText:'',
      activeName:'first',
      props: {
        label: 'orgName',
        disabled:'disabled'
      },
      qiyelist: [],
      value: '',
      displaylist: [],
      //  ---------
      userNo: '',
      checklist: [],
      orgNo: '',
      entityobj: {},
      allChenkVal: []
    };
  },

  async mounted() {
    this.getlist()
    this.gettree()
  },

  methods: {
    //  获取下拉菜单
    async gettree() {
      const res = await getqiyexialalist()
      const array=[]
      for (let i = 0; i < res.data.list.length; i++){
        for (let j = 0; j < res.data.list[i].children.length; j++){
          array.push(res.data.list[i].children[j])
        }
      }
      this.qiyelist=array
    },
    // 树节点点击
    handleNodeClick(val) {
      this.userName=val.orgName
      this.userNo = val.userNo ? val.userNo : ''
      if (this.value) {
        this.change(this.value)
      }
    },
    // 企业用户下拉
    async change(val) {
      // if(!this.userNo) return this.$message.warning('请先选择用户')
      this.orgNo = val
      this.orgName=this.qiyelist.filter(ele=>ele.id==val)[0].name
      if (this.userNo) {
        const res = await getuserinfo({ orgNo: val, userNo: this.userNo })
        if (res.code == 200) {
          this.entityobj=res.data.entity
        this.$set(this.form,'isApp',res.data.entity.isApp=='1'?true:false)
        this.$set(this.form,'isNote',res.data.entity.isNote=='1'?true:false)
        this.$set(this.form,'isRing',res.data.entity.isRing=='1'?true:false)
        this.$set(this.form,'isOa',res.data.entity.isOa=='1'?true:false)
        this.$set(this.form,'severityRing',res.data.entity.severityRing)
        this.$set(this.form,'generalRing',res.data.entity.generalRing)
        this.$set(this.form,'slightRing',res.data.entity.slightRing)
        this.$set(this.form,'notePhones',res.data.entity.notePhones)
        this.$set(this.form,'oaPhones',res.data.entity.oaPhones)
        const arr=this.activeName=='first'?res.data.entity.webAlarmTypes:this.activeName=='second'?res.data.entity.noteAlarmTypes:this.activeName=='gongzhao'?res.data.entity.oaAlarmTypes: res.data.entity.appAlarmTypes
          this.checklist = arr ? arr.split(',') : []
        } else {
          this.entityobj = {}
          this.form = {}
          this.checklist = []
        }
        this.allChenkVal = this.checklist
          
      } else {
        this.entityobj = {}
          this.form = {}
          this.checklist = []
      }
        
      // }
    },
    updateAll(val) {
      this.allChenkVal = Array.from(new Set(val));
    },
    // 保存修改信息
    async submit() {
      let arraystring = this.allChenkVal.join(',')
      if (this.userNo&&this.orgNo) {
        await postbaocuninfoapi({
          ...this.form,
        id:this.entityobj.id?this.entityobj.id:'',
        isApp:this.form.isApp?'1':'0',
        isNote:this.form.isNote?'1':'0',
        isRing:this.form.isRing?'1':'0',
        isOa:this.form.isOa?'1':'0',
        orgNo: this.orgNo,
        orgName:this.orgName,
        userNo: this.userNo,
        userName:this.userName,
        webAlarmTypes:this.activeName == 'first' ? arraystring : '',
        appAlarmTypes: this.activeName == 'third' ? arraystring : '',
        noteAlarmTypes:this.activeName == 'second' ? arraystring : '',
        oaAlarmTypes:this.activeName == 'gongzhao' ? arraystring : '',
        settingType: this.activeName == 'first' ? '1' : this.activeName == 'second' ?'2':this.activeName =='gongzhao'?'4': '3'
        })
        this.change(this.orgNo)
        this.$message.success('操作成功')
      } else {
        this.$message.warning('请先选择用户或用电企业')
      }
    },
        // 获取列表
    async getlist() {
      const res = await getgaofenzuapi()
      this.displaylist=res.data.list
    },
    // 导航栏点击事件
    handleClick(val) {
      
      if (this.entityobj) {
        const arr = val._props.name == 'first' ? this.entityobj.webAlarmTypes : val._props.name == 'second' ? this.entityobj.noteAlarmTypes : val._props.name == 'gongzhao' ?this.entityobj.oaAlarmTypes : this.entityobj.appAlarmTypes
        this.checklist = arr ? arr.split(',') : []
      } else {
        this.checklist = []
      }
      this.allChenkVal = this.checklist
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const res = await getgengjiedianapi()
      if (node.level === 0) { // 初始的级数（最顶层）
        const array = [res.data.entity]
        array.forEach(ele => {
          ele.disabled = true
        })
        return resolve(array) // 最顶层数据渲染为region
      }
      const ress = await getzhuzhijigouapi({ parentOrgNo: res.data.entity.orgNo })
      if (node.level === 1) {
        // node.disabled = true;
        ress.data.list.forEach(ele => {
          ele.disabled = true
        })
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const resss=await getuserlistapis({deptNo:node.data.orgNo})
        const newData = resss.data.list.map(obj => {
          return Object.keys(obj).reduce((acc, key) => {
            acc[key === 'userName' ? 'orgName' : key] = obj[key];
            return acc;
          }, {});
        });
        return resolve(newData)
      } else {
        return resolve([])
      }
    },
    // 树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.orgName.indexOf(value) !== -1;
    },
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
};
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.disabled-row {
  background-color: #ccc;
  cursor: not-allowed;
}
.options{
  padding-left: 10px;
}
.red{
  color: red;
}
.green{
  color: #18bef5;
}
.yellow{
  color: #e6ad00;
}
.bigbox{
  padding: 10px;
  height: 100%;
  background-color: #f1f1f1;
  display: flex;
  .leftbox{
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    margin-right: 10px;
  }
  .rightbox{
    flex: 1;
    height: 100%;
    // background-color: #fff;
    .topbox{
     height: 80px;
     background-color: #fff;
     margin-bottom: 10px;
     line-height: 80px;
      padding-left: 20px;   
      }
      .bodybox{
      background-color: #fff;
      height:calc(100% - 90px);
      padding: 20px;
      .xitong{
        height: 50px;
        margin-bottom: 15px;
        border-bottom: 2px solid #ccc;
        // padding-bottom: 15px;
        // padding-bottom: 30px !important;
        .span{
        margin-right: 20px;
      }
      .left{
        margin-left: 40px;
      }
      .img{
        height: 28px;
        vertical-align:middle;
        margin-left: 10px;
        margin-right: 20px;
      }
      }
   
     .footer{
      text-align: center;
      .button{
        width: 60px;
        height: 30px;background-color: #3b8eea;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
     }
    }
  }
}

.el-tabs ::v-deep .el-tabs__nav-wrap::after{
   background-color: #fff;
}
// ::v-deep   .el-tabs{
//   height: 100%;
// }
// ::v-deep .el-tabs__content{
//   height: 90%;
// }
// ::v-deep .el-tab-pane{
//   height: 100%;
// }
::-webkit-scrollbar{
	display:none;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #bae7ff !important;
}
::v-deep .el-tree-node__content{
  &:hover{
    background-color: #f0f7ff;
  }
}
</style>